<template>
  <div>
    <div
      :class="{ isTree: type == 'tree', RowContainer_V2: type == 'row' }"
      v-for="item in treeList"
      :key="item.id"
      v-show="item.display"
    >
      <slot :item="item"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "treeList",
  props: {
    openOrclose: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "row",
    },
    param: {
      type: String,
      default: "",
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      treeList: [],
      temp: [],
    };
  },
  methods: {
    clickNode(id, param, field) {
      for (let i = 0; i < this.treeList.length; i++) {
        if (this.treeList[i][field] === id) {
          this.treeList[i].branch = !this.treeList[i].branch;
          console.log(this.treeList[i].branch);
          if (this.treeList[i].branch == false) {
            //关
            this.recurseDown(this.treeList[i], param, "close", field);
          } else {
            //开
            this.recurseDown(this.treeList[i], param, "open", field);
          }
        }
      }
      console.log(this.treeList);
      this.$forceUpdate();
    },

    closeAndOpen(arr, type, field) {
      this.treeList.forEach((item) => {
        console.log(item);
        arr.forEach((el) => {
          if (item[field] == el[field]) {
            if (type == "close") {
              if (item.branch) {
                item.branch = !item.branch;
              }
              item.display = false;
            } else {
              item.display = true;
            }
          }
        });
      });
    },
    recurseDown(child, param, type, field) {
      let arr = [];
      if (child[param] && child[param].length > 0) {
        child[param].forEach((item) => {
          arr.push(item);
          if (type == "close") {
            this.recurseDown(item, param, type, field);
          }
        });
      }
      this.closeAndOpen(arr, type, field);
    },
    setCatalogList(arr, treeList,level, param) {
      treeList.forEach((item) => {
        item.level = level;
        arr.push(item);
        if (item[param] && item[param].length > 0) {
          item["isChildren"] = true;
          item["branch"] = true;
          this.setCatalogList(arr, item[param],level + 1, param);
        }
      });
    },
    getList(arr, param) {
      const treeList = arr;
      const tableList = [];
      this.setCatalogList(tableList, treeList, 0,param);
      tableList.forEach((item, index) => {
        item["paddingLeft"] = item.level > 0 ? `${item.level * 2}em` : "0em";
        item["display"] = true;
        if (this.type == "tree") {
          if (this.openOrclose) {
            item["branch"] = true;
            item["display"] = true;
          } else {
            item["branch"] = false;
            if (item.level !== 0) {
              item["display"] = false;
            }
          }
        }
      });
      return tableList;
    },
  },
  watch: {
    list: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.treeList = this.getList(JSON.parse(JSON.stringify(val)), this.param);
        }
      },
    },
  },
};
</script>